<template>
  <div class="box">
    <header>
      <div class="top">
        <i @click="back">＜返回</i><span>商城搜索</span>
      </div>
      <van-search
  v-model="text"
  placeholder="请输入搜索关键词"
  show-action
  shape="round"
  @search="search"
>
  <div slot="action" @click="search">搜索</div>
</van-search>
    </header>
    <div class="content">
      <Sousuo :list="searchlist" />
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Sousuo from '@/components/Search.vue'
import Vue from 'vue'
import { Search } from 'vant'
Vue.use(Search)
export default {
  components: {
    Sousuo
  },
  data () {
    return {
      searchlist: [],
      text: '手机'
    }
  },
  mounted () {
    axios.get('pro/search?text=' + this.text).then(res => {
      console.log(res)
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        console.log(res)
        this.searchlist = res.data.data
      }
    })
  },
  //   created () {
  //     console.log(this.text)
  //     let token = localStorage.getItem('token')
  //     let url = '/pro/search?text=' + localStorage.getItem('text') + '&token=' + token
  //     axios.get(url).then(res => {
  //       console.log(res)
  //       if (res.data.code === '10119') {
  //         this.$router.push('/login')
  //       } else {
  //         this.prolist = res.data.data
  //       }
  //     })
  //   },
  // 路由的导航守卫
  // beforeRouteLeave (to, from, next) {
  //   localStorage.setItem('text', this.text)
  //   next()
  // },
  methods: {
    back () {
      this.$router.back()
    },
    search () {
      console.log('11111')
      // let token = localStorage.getItem('token')
      // let url = '/pro/search?text=' + this.text + '&token=' + token
      axios.get('pro/search?text=' + this.text).then(res => {
        console.log(res)
        if (res.data.code === '10119') {
          this.$router.push('/login')
        } else {
          console.log(res)
          this.searchlist = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
 header{
  background: none;
  overflow: auto;
  .top{
    height: 40px;
     background: #000;
     display: flex;
     align-items: center;
     color: #fff;
     span{
       @include flex(2);
       text-align: left;
       text-indent: 15px;
     }
     i{
       @include flex(1);
       text-align: left;
       text-indent: 10px;
     }
  }
}
</style>
